<template>
	<view>
		<swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in imgs">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="text">
			{{ shortBio }}
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const imgs = ref([]);
const shortBio = ref('');
//获取数据
onLoad(async (e) => {
	const { id } = e;
	const res = await uni.request({
		url: 'https://api-vue-base.itheima.net/api/lol/info',
		method: 'GET',
		data: { id }
	});
	// console.log(res.data);
	imgs.value = res.data.data.skins.filter((v) => v.mainImg).map((v) => v.mainImg);
	shortBio.value = res.data.data.hero.shortBio;
	uni.setNavigationBarTitle({
		title: res.data.data.hero.name
	});
});
</script>

<style>
swiper {
	height: 500rpx;
}
image {
	width: 100%;
	height: 400rpx;
}

.text {
	background-color: antiquewhite;
	padding: 20rpx;
	font-size: 30rpx;
}
</style>
